<template>
  <div>
    <Form ref="formItem" :model="formItem" :label-width="100" @submit.native.prevent>
      <FormItem label="编号：" v-if="formItem.uid">
        <Input class="form-sty" disabled v-model="formItem.uid" placeholder="请输入编号" style="width: 80%"></Input>
      </FormItem>
      <FormItem label="真实姓名：">
        <Input
          class="form-sty"
          v-model.trim="formItem.real_name"
          placeholder="请输入真实姓名"
          style="width: 80%"
        ></Input>
      </FormItem>
      <FormItem label="手机号码：">
        <Input class="form-sty" v-model="formItem.phone" placeholder="请输入手机号码" style="width: 80%"></Input>
      </FormItem>
      <FormItem label="生日：">
        <DatePicker
          class="form-sty"
          type="date"
          :value="formItem.birthday"
          placeholder="请选择生日"
          style="width: 80%"
          format="yyyy-MM-dd"
          @on-change="formItem.birthday = $event"
        ></DatePicker>
      </FormItem>
      <FormItem label="身份证号：">
        <Input class="form-sty" v-model.trim="formItem.card_id" placeholder="请输入身份证号" style="width: 80%"></Input>
      </FormItem>
	  <FormItem label="用户地址：">
	    <Input class="form-sty" v-model="formItem.addres" placeholder="请输入用户地址" style="width: 80%"></Input>
	  </FormItem>

    <FormItem label="企业：">
      <Select v-model="formItem.org_code" class="form-sty" @on-change="onchange">
        <Option  v-for="(item, index) in companyList" :key="index" :value="item.org_code">{{item.name}}</Option>
      </Select>
    </FormItem>

    <FormItem label="角色：">
      <Select v-model="formItem.org_str_code" class="form-sty" @on-change="onchangeRole">
        <Option  v-for="(item, index) in roleList" :key="index" :value="item.code">{{item.name}}</Option>
      </Select>
    </FormItem>

    <FormItem label="上级领导：">
      <Select v-model="formItem.org_parent_uid" class="form-sty">
         <Option  v-for="(item, index) in leadershipList" :key="index" :value="item.uid">{{item.real_name}}</Option>
      </Select>
    </FormItem>

    <FormItem label="账户余额：">
	    <Input disabled class="form-sty" type="number" v-model="formItem.now_money" placeholder="请输入企业名称" style="width: 80%"></Input>
	  </FormItem>

	  <FormItem label="企业名称：">
	    <Input class="form-sty" v-model="formItem.corp_name" placeholder="请输入企业名称" style="width: 80%"></Input>
	  </FormItem>
	  <FormItem label="企业规模：">
	    <Input class="form-sty" v-model="formItem.corp_guimo" placeholder="请输入企业规模" style="width: 80%"></Input>
	  </FormItem>
      <FormItem label="采购需求：">
        <Input class="form-sty" v-model="formItem.caigou" placeholder="请输入采购需求" style="width: 80%"></Input>
      </FormItem>
	  
      <FormItem label="用户备注：">
        <Input class="form-sty" v-model="formItem.mark" placeholder="请输入用户备注" style="width: 80%"></Input>
      </FormItem>
      <FormItem label="登录密码：">
        <Input
          class="form-sty"
          type="password"
          v-model="formItem.pwd"
          autocomplete="new-password"
          placeholder="请输入登录密码"
          style="width: 80%;"
        ></Input>
      </FormItem>
      <FormItem label="确认密码：">
        <Input
          class="form-sty"
          type="password"
          v-model="formItem.true_pwd"
          autocomplete="new-password"
          placeholder="请输入确认密码"
          style="width: 80%"
        ></Input>
      </FormItem>
		  <FormItem label="用户分类：">
	        <Input class="form-sty" v-model="formItem.cate_id" placeholder="请输入一级分类id,多个分类用英文,隔开" style="width: 80%"></Input>
		  <router-link class="addfont" target="_blank" to="/admin/product/product_classify">查看分类</router-link>
		  <div class="tip">输入分类id之后APP分类内只显示此处分类的商品，不输入显示全部分类</div>
		  </FormItem>
      <FormItem label="用户等级：">
        <Select v-model="formItem.level" class="form-sty">
          <Option v-for="(item, index) in infoData.levelInfo" :key="index" :value="item.id">{{ item.name }}</Option>
        </Select>
      </FormItem>
      <FormItem label="用户分组：">
        <Select v-model="formItem.group_id" class="form-sty">
          <Option v-for="(item, index) in infoData.groupInfo" :key="index" :value="item.id">{{
            item.group_name
          }}</Option>
        </Select>
      </FormItem>
      <FormItem label="用户标签：">
        <!-- <Select v-model="formItem.label_id">
          <Option
            v-for="(item, index) in infoData.labelInfo"
            :key="index"
            :value="item.value"
            >{{ item.label }}</Option
          >
        </Select> -->
        <div style="display: flex">
          <div class="labelInput acea-row row-between-wrapper" @click="openLabel">
            <div style="width: 90%">
              <div v-if="dataLabel.length">
                <Tag closable v-for="(item, index) in dataLabel" :key="index" @on-close="closeLabel(item)">{{
                  item.label_name
                }}</Tag>
              </div>
              <span class="span" v-else>选择用户关联标签</span>
            </div>
            <div class="ivu-icon ivu-icon-ios-arrow-down"></div>
          </div>
          <span class="addfont" @click="addLabel">新增标签</span>
        </div>
      </FormItem>
      <FormItem label="推广资格：">
        <RadioGroup v-model="formItem.spread_open" class="form-sty">
          <Radio :label="1">启用</Radio>
          <Radio :label="0">禁用</Radio>
        </RadioGroup>
        <div class="tip">禁用用户的推广资格后，在任何分销模式下该用户都无分销权限</div>
      </FormItem>
      <FormItem label="推广权限：">
        <RadioGroup v-model="formItem.is_promoter" class="form-sty">
          <Radio :label="1">开启</Radio>
          <Radio :label="0">锁定</Radio>
          <div class="tip">指定分销模式下，开启或关闭用户的推广权限</div>
        </RadioGroup>
      </FormItem>
      <FormItem label="用户状态：">
        <RadioGroup v-model="formItem.status" class="form-sty">
          <Radio :label="1">开启</Radio>
          <Radio :label="0">锁定</Radio>
        </RadioGroup>
      </FormItem>
    </Form>

    <Modal v-model="labelShow" scrollable title="请选择用户标签" :closable="false" width="500" :footer-hide="true">
      <userLabel
        v-if="labelShow"
        :only_get="true"
        :uid="formItem.uid"
        @close="labelClose"
        @activeData="activeData"
      ></userLabel>
    </Modal>
  </div>
</template>

<script>
import userLabel from '@/components/userLabel';
import {
  treeListApi,
} from '@/api/product';
import { userLabelAddApi } from '@/api/user';
import { getOrganizationInfo,getOrganizationInfoRoles,getParentUids } from '@/api/company';


export default {
  name: 'userEdit',
  components: { userLabel },
  props: {
    // modals: {
    //   default: false,
    //   type: Boolean,
    // },
    userData: {
      type: Object,
      default: () => {},
    },
  },
  watch: {},
  data() {
    return {
      modals: false,
      labelShow: false,
      orderStatus: 0,
      total_num: 0,
      splitSwitch: true,
	  treeSelect: [],
      formItem: {
        uid: 0,
        real_name: '',
        phone: '',
        birthday: '',
        card_id: '',
        addres: '',
        corp_name: '',
        corp_guimo: '',
        caigou: '',
        mark: '',
        pwd: '',
        true_pwd: '',
        level: '',
        group_id: 1,
        label_id: [],
        spread_open: 0,
        is_promoter: 0,
        status: 1,
		    cate_id: [],
        org_code: '',
        org_str_code: '',
        org_parent_uid: '',
        now_money: 0,
      },
      express: [],
      expressTemp: [],
      deliveryList: [],
      temp: {},
      export_open: true,
      manyFormValidate: [],
      groupInfo: [],
      labelInfo: [],
      levelInfo: [],
      infoData: {
        groupInfo: [],
        labelInfo: [],
        levelInfo: [],
      },
      dataLabel: [],
      companyList: [],
      roleList: [],
      leadershipList: [],
      company: '',
    };
  },

  created(){
    this.getCompany();
    this.initRole();
  },

  mounted() {
	 this.goodsCategory();
    this.$set(this.infoData, 'groupInfo', this.userData.groupInfo);
    this.$set(this.infoData, 'levelInfo', this.userData.levelInfo);
    this.$set(this.infoData, 'labelInfo', this.userData.labelInfo);
    let arr = Object.keys(this.formItem);
    if (this.userData.userInfo.uid) {
      arr.map((i) => {
        this.formItem[i] = this.userData.userInfo[i];
      });
      if (!this.formItem.birthday) this.formItem.birthday = '';
      if (this.formItem.label_id.length) {
        this.dataLabel = this.formItem.label_id;
      }
    }
	// console.log(111)
	
    // this.formItem = this.userData.userInfo;
  },
  methods: {
    getCompany(){
      getOrganizationInfo().then((res) => {
        if(res.status == 200){
          this.companyList = res.data
          this.companyList.unshift({
            org_code: '',
            name: '无',
          })
        }else{
	        this.$Message.error(res.msg);
        }
      })
    },

    onchange(e){
      this.company = e
      getOrganizationInfoRoles(e).then((res) => {
        if(res.status == 200){
          this.roleList = res.data
          this.roleList.unshift({
            code: '',
            name: '无',
          })
        }else{
	        this.$Message.error(res.msg);
        }
      })
    },

    onchangeRole(e){
      getParentUids(this.company,e).then((res) => {
        if(res.status == 200){
          this.leadershipList = res.data
          this.leadershipList.unshift({
            uid: '',
            real_name: '无',
          })
        }else{
	        this.$Message.error(res.msg);
        }
      })
    },

    initRole(){
      if(!this.userData.userInfo.org_code)return
      this.company = this.userData.userInfo.org_code
      getOrganizationInfoRoles(this.userData.userInfo.org_code).then((res) => {
        if(res.status == 200){
          this.roleList = res.data
          this.roleList.unshift({
            code: '',
            name: '无',
          })
        }else{
          this.$Message.error(res.msg);
        }
      })
      if(!this.userData.userInfo.org_str_code)return
      getParentUids(this.userData.userInfo.org_code,this.userData.userInfo.org_str_code).then((res) => {
        if(res.status == 200){
          this.leadershipList = res.data
          this.leadershipList.unshift({
            uid: '',
            real_name: '无',
          })
        }else{
	        this.$Message.error(res.msg);
        }
        
      })
    },

    addLabel() {
      this.$modalForm(userLabelAddApi(0)).then(() => {});
    },
	// 商品分类；
	goodsCategory() {
	  treeListApi(1)
	    .then((res) => {
			
	      this.treeSelect = res.data;
	    })
	    .catch((res) => {
	      this.$Message.error(res.msg);
	    });
	},
    closeLabel(label) {
      let index = this.dataLabel.indexOf(this.dataLabel.filter((d) => d.id == label.id)[0]);
      this.dataLabel.splice(index, 1);
    },
    changeModal(status) {
      if (!status) {
        this.cancel();
        this.reset();
      }
    },
	
    openLabel(row) {
      this.labelShow = true;
      this.$refs.userLabel.userLabel(JSON.parse(JSON.stringify(this.infoData.labelInfo)));
    },
    cancel() {},
    activeData(dataLabel) {
      this.labelShow = false;
      this.dataLabel = dataLabel;
    },
    // 标签弹窗关闭
    labelClose() {
      this.labelShow = false;
    },
    closeLabel(label) {
      let index = this.dataLabel.indexOf(this.dataLabel.filter((d) => d.id == label.id)[0]);
      this.dataLabel.splice(index, 1);
    },
    reset() {
      this.formItem = {
        uid: 0,
        real_name: '',
        phone: '',
        birthday: '',
        card_id: '',
        addres: '',
        mark: '',
        pwd: '',
        true_pwd: '',
        level: '',
        group_id: '',
        label_id: [],
        spread_open: 0,
        is_promoter: 0,
        status: 1,
      };
    },
  },
};
</script>

<style lang="stylus" scoped>
.labelInput {
  border: 1px solid #dcdee2;
  width: 400px;
  padding: 0 8px;
  border-radius: 5px;
  min-height: 30px;
  cursor: pointer;

  .span {
    color: #c5c8ce;
  }

  .iconxiayi {
    font-size: 12px;
  }
}

.ivu-form-item {
  margin-bottom: 10px;
}

.form-sty {
  width: 400px !important;
}

.addfont {
  display: inline-block;
  font-size: 13px;
  font-weight: 400;
  color: #1890FF;
  margin-left: 14px;
  cursor: pointer;
  margin-left: 10px;
}

.ivu-icon-ios-arrow-down {
  font-size: 14px;
}

.tip {
  color: #bbb;
}
</style>
